<!--
  Copyright © 2015-2022 Cask Data, Inc.

  Licensed under the Apache License, Version 2.0 (the "License"); you may not
  use this file except in compliance with the License. You may obtain a copy of
  the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  License for the specific language governing permissions and limitations under
  the License.
-->

<div class="side-panel top text-center">
  <div class="hydrator-metadata"
      ng-class="{'expanded': HydratorPlusPlusTopPanelCtrl.metadataExpanded}"
      ng-click="!HydratorPlusPlusTopPanelCtrl.metadataExpanded && HydratorPlusPlusTopPanelCtrl.openMetadata()"
      data-cy="pipeline-metadata"
      data-testid="pipeline-metadata">
    <div class="pipeline-type">
      <span ng-if="HydratorPlusPlusTopPanelCtrl.GLOBALS.etlBatchPipelines.includes(HydratorPlusPlusTopPanelCtrl.state.artifact.name)"
            class="icon-ETLBatch"></span>
      <span ng-if="HydratorPlusPlusTopPanelCtrl.state.artifact.name === HydratorPlusPlusTopPanelCtrl.GLOBALS.etlRealtime"
            class="icon-ETLRealtime"></span>
      <span ng-if="HydratorPlusPlusTopPanelCtrl.state.artifact.name === HydratorPlusPlusTopPanelCtrl.GLOBALS.etlDataStreams"
            class="icon-sparkstreaming"></span>
    </div>
    <div class="metadata text-left">
      <div class="pipeline-name"
          ng-class="{'placeholder': !HydratorPlusPlusTopPanelCtrl.state.metadata.name.length, 'error': HydratorPlusPlusTopPanelCtrl.invalidName}"
          ng-if="!HydratorPlusPlusTopPanelCtrl.metadataExpanded"
          ng-bind="HydratorPlusPlusTopPanelCtrl.state.metadata['name']"
          uib-tooltip="{{ HydratorPlusPlusTopPanelCtrl.state.metadata['name'] }}"
          tooltip-placement="bottom-left"
          tooltip-append-to-body="true"
          tooltip-enable="!HydratorPlusPlusTopPanelCtrl.invalidName"
          tooltip-class="toppanel-tooltip">
      </div>
      <div ng-if="!HydratorPlusPlusTopPanelCtrl.metadataExpanded && HydratorPlusPlusTopPanelCtrl.invalidName"
          uib-tooltip="Invalid Name"
          tooltip-is-open="HydratorPlusPlusTopPanelCtrl.invalidName"
          tooltip-placement="bottom-left"
          tooltip-append-to-body="true"
          tooltip-class="error-tooltip"></div>
      <input type="text"
            id="pipeline-name-input"
            ng-if="HydratorPlusPlusTopPanelCtrl.metadataExpanded"
            ng-model="HydratorPlusPlusTopPanelCtrl.state.metadata['name']"
            placeholder="Name your pipeline"
            ng-keyup="HydratorPlusPlusTopPanelCtrl.onEnterOnMetadata($event)" />
      <div class="pipeline-description"
          ng-class="{'placeholder': !HydratorPlusPlusTopPanelCtrl.state.metadata['description'].length}"
          ng-if="!HydratorPlusPlusTopPanelCtrl.metadataExpanded"
          ng-bind="HydratorPlusPlusTopPanelCtrl.parsedDescription"
          uib-tooltip="{{ HydratorPlusPlusTopPanelCtrl.parsedDescription }}"
          tooltip-placement="bottom-left"
          tooltip-append-to-body="true"
          tooltip-class="toppanel-tooltip"
          ></div>
      <textarea ng-model="HydratorPlusPlusTopPanelCtrl.state.metadata['description']"
                placeholder="Enter a description for your pipeline."
                ng-if="HydratorPlusPlusTopPanelCtrl.metadataExpanded"
                data-cy="pipeline-description-input"
                data-testid="pipeline-description-input"></textarea>
      <div class="btn-group pull-left" ng-if="HydratorPlusPlusTopPanelCtrl.metadataExpanded">
        <button
          type="button"
          class="btn btn-primary save-button"
          ng-click="HydratorPlusPlusTopPanelCtrl.saveMetadata($event)"
          data-cy="pipeline-metadata-ok-btn"
          data-testid="pipeline-metadata-ok-btn">
          Save
        </button>
        <button
          type="button"
          class="btn btn-secondary cancel-button"
          ng-click="HydratorPlusPlusTopPanelCtrl.resetMetadata($event)"
          data-cy="pipeline-metadata-cancel-btn"
          data-testid="pipeline-metadata-cancel-btn">
          Cancel
        </button>
      </div>
    </div>
  </div>

  <div ng-if="true">
    <div class="btn-group action-buttons"
        ng-if="!HydratorPlusPlusTopPanelCtrl.previewMode">
      <div class="btn border-right"
          ng-click="HydratorPlusPlusTopPanelCtrl.isPreviewEnabled && HydratorPlusPlusTopPanelCtrl.togglePreviewMode()"
          uib-tooltip="Pipeline preview is not available in distributed mode."
          tooltip-placement="bottom"
          tooltip-class="toppanel-tooltip"
          tooltip-enable="!HydratorPlusPlusTopPanelCtrl.isPreviewEnabled"
          ng-disabled="!HydratorPlusPlusTopPanelCtrl.isPreviewEnabled"
          data-cy="pipeline-preview-btn"
          data-testid="pipeline-preview-btn">
        <div class="btn-container">
          <span class="fa icon-eye"></span>
          <div class="button-label">Preview</div>
        </div>
      </div>
      <div class="btn margin-left"
          ng-click="HydratorPlusPlusTopPanelCtrl.toggleConfig()"
          ng-class="{'btn-select': HydratorPlusPlusTopPanelCtrl.viewConfig}"
          data-cy="pipeline-configure-modeless-btn">
        <div class="btn-container">
          <span class="fa fa-sliders"></span>
          <div class="button-label">Configure</div>
        </div>
      </div>
      <div class="btn"
          ng-if="HydratorPlusPlusTopPanelCtrl.showSchedule"
          ng-class="{'active': HydratorPlusPlusTopPanelCtrl.viewScheduler}"
          ng-click="!HydratorPlusPlusTopPanelCtrl.hasNodes || HydratorPlusPlusTopPanelCtrl.toggleScheduler($event)"
          uib-tooltip="Start building a pipeline before scheduling"
          tooltip-placement="bottom auto"
          tooltip-enable="!HydratorPlusPlusTopPanelCtrl.hasNodes"
          tooltip-class="toppanel-tooltip"
          tooltip-append-to-body="true"
          ng-disabled="!HydratorPlusPlusTopPanelCtrl.hasNodes"
          id="pipeline-schedule-modeless-btn"
          data-cy="pipeline-schedule-modeless-btn">
        <div class="btn-container">
          <span class="fa icon-runtimestarttime"></span>
          <div class="button-label">Schedule</div>
        </div>
      </div>
      <div class="btn"
          ng-click="!HydratorPlusPlusTopPanelCtrl.hasNodes || HydratorPlusPlusTopPanelCtrl.onSaveDraft()"
          uib-tooltip="Start building a pipeline before saving"
          tooltip-placement="bottom auto"
          tooltip-enable="!HydratorPlusPlusTopPanelCtrl.hasNodes"
          tooltip-class="toppanel-tooltip"
          tooltip-append-to-body="true"
          ng-disabled="!HydratorPlusPlusTopPanelCtrl.hasNodes"
          data-cy="pipeline-draft-save-btn"
          data-testid="pipeline-draft-save-btn">
        <div class="btn-container">
          <span class="fa icon-savedraft"></span>
          <div class="button-label">Save</div>
        </div>
      </div>
      <div class="btn border-right"
          ng-click="!HydratorPlusPlusTopPanelCtrl.hasNodes || HydratorPlusPlusTopPanelCtrl.onPublish()"
          uib-tooltip="Start building a pipeline before deploying"
          tooltip-placement="bottom auto"
          tooltip-enable="!HydratorPlusPlusTopPanelCtrl.hasNodes"
          tooltip-class="toppanel-tooltip"
          tooltip-append-to-body="true"
          ng-disabled="!HydratorPlusPlusTopPanelCtrl.hasNodes"
          data-cy="deploy-pipeline-btn"
          data-testid="deploy-pipeline-btn">
        <div class="btn-container">
          <span class="fa icon-publish"></span>
          <div class="button-label">Deploy</div>
        </div>
      </div>
      <div class="btn margin-left"
          ng-click="HydratorPlusPlusTopPanelCtrl.onImport()"
          data-cy="pipeline-import-btn"
          data-testid="pipeline-import-btn">
        <div class="btn-container">
          <span class="fa icon-import"></span>
          <div class="button-label">Import</div>
        </div>
      </div>
      <div class="btn border-right"
          ng-click="!HydratorPlusPlusTopPanelCtrl.hasNodes || HydratorPlusPlusTopPanelCtrl.onExport()"
          uib-tooltip="Start building a pipeline before exporting"
          tooltip-placement="bottom auto"
          tooltip-enable="!HydratorPlusPlusTopPanelCtrl.hasNodes"
          tooltip-class="toppanel-tooltip"
          tooltip-append-to-body="true"
          ng-disabled="!HydratorPlusPlusTopPanelCtrl.hasNodes"
          data-cy="pipeline-export-btn"
          data-testid="pipeline-export-btn">
        <div class="btn-container">
          <span class="fa icon-export"></span>
          <div class="button-label">Export</div>
        </div>
      </div>
    </div>

    <!-- PREVIEW MODE BUTTONS -->
    <div class="btn-group action-buttons"
      ng-if="HydratorPlusPlusTopPanelCtrl.previewMode">
      <div class="btn active"
          ng-click="HydratorPlusPlusTopPanelCtrl.togglePreviewMode()"
          data-cy="preview-active-btn">
        <div class="btn-container">
          <span class="fa icon-eye"></span>
          <div class="button-label">Preview</div>
        </div>
      </div>
      <div class="btn no-border-left"
          ng-click="!HydratorPlusPlusTopPanelCtrl.previewLoading && !HydratorPlusPlusTopPanelCtrl.previewRunning && HydratorPlusPlusTopPanelCtrl.toggleConfig()"
          ng-disabled="HydratorPlusPlusTopPanelCtrl.previewLoading || HydratorPlusPlusTopPanelCtrl.previewRunning"
          ng-class="{'btn-select': HydratorPlusPlusTopPanelCtrl.viewConfig}"
          data-cy="preview-config-btn">
        <div class="btn-container">
          <span class="fa fa-sliders"></span>
          <div class="button-label">Configure</div>
        </div>
      </div>
      <div class="btn"
            ng-if="!HydratorPlusPlusTopPanelCtrl.previewLoading && !HydratorPlusPlusTopPanelCtrl.previewRunning"
            ng-click="!HydratorPlusPlusTopPanelCtrl.previewLoading &&
            HydratorPlusPlusTopPanelCtrl.hasNodes &&
            HydratorPlusPlusTopPanelCtrl.startOrStopPreview()"
            uib-tooltip="Start building a pipeline before starting preview"
            tooltip-placement="bottom"
            tooltip-class="toppanel-tooltip"
            tooltip-enable="!HydratorPlusPlusTopPanelCtrl.hasNodes"
            ng-disabled="HydratorPlusPlusTopPanelCtrl.previewLoading || !HydratorPlusPlusTopPanelCtrl.hasNodes"
            data-cy="preview-top-run-btn"
            data-testid="preview-top-run-btn">
        <div class="btn-container">
          <span class="fa fa-play text-success"></span>
          <div class="button-label">Run</div>
        </div>
      </div>
      <div class="btn"
            ng-if="!HydratorPlusPlusTopPanelCtrl.previewLoading && HydratorPlusPlusTopPanelCtrl.previewRunning"
            ng-click="!HydratorPlusPlusTopPanelCtrl.previewLoading && HydratorPlusPlusTopPanelCtrl.startOrStopPreview()"
            ng-disabled="HydratorPlusPlusTopPanelCtrl.previewLoading"
            data-cy="stop-preview-btn">
        <div class="btn-container">
          <span class="fa fa-stop text-danger"></span>
          <div class="button-label">Stop</div>
        </div>
      </div>
      <div class="btn"
            ng-if="HydratorPlusPlusTopPanelCtrl.previewLoading"
            data-cy="starting-preview-btn">
        <div class="btn-container">
          <span class="fa fa-refresh fa-spin"></span>
          <div class="button-label">
            {{HydratorPlusPlusTopPanelCtrl.loadingLabel}}
          </div>
        </div>
      </div>
      <div class="btn run-time" title="{{HydratorPlusPlusTopPanelCtrl.queueStatus}}">
        <div class="btn-container">
          <span>
            {{ HydratorPlusPlusTopPanelCtrl.displayDuration.minutes }}:{{ HydratorPlusPlusTopPanelCtrl.displayDuration.seconds }}
          </span>
          <div class="button-label">{{HydratorPlusPlusTopPanelCtrl.timerLabel}}</div>
        </div>
      </div>
      <div class="btn log-viewer"
          ng-class="{'btn-select': HydratorPlusPlusTopPanelCtrl.viewLogs}"
          ng-click="HydratorPlusPlusTopPanelCtrl.currentPreviewId ? HydratorPlusPlusTopPanelCtrl.viewLogs = !HydratorPlusPlusTopPanelCtrl.viewLogs : false"
          ng-disabled="!HydratorPlusPlusTopPanelCtrl.currentPreviewId">
        <div class="btn-container">
          <span class="fa fa-file-text-o"></span>
          <div class="button-label">Logs</div>
        </div>
      </div>
    </div>
    <my-file-select
      class="sr-only"
      id="pipeline-import-config-link"
      data-button-icon="fa-upload"
      on-file-select="HydratorPlusPlusTopPanelCtrl.importFile($files)"
      data-button-label="Import">
    </my-file-select>
  </div>

  <cask-resource-center-button></cask-resource-center-button>
</div>
<div class="pipeline-settings-backdrop"
     ng-if="HydratorPlusPlusTopPanelCtrl.viewLogs ||
     HydratorPlusPlusTopPanelCtrl.viewConfig"
     ng-click="HydratorPlusPlusTopPanelCtrl.viewLogs =
     HydratorPlusPlusTopPanelCtrl.viewConfig = false">
</div>
<div class="pipeline-configurations" ng-if="HydratorPlusPlusTopPanelCtrl.viewConfig">
  <div
    runtime-arguments="HydratorPlusPlusTopPanelCtrl.runtimeArguments"
    apply-runtime-arguments="HydratorPlusPlusTopPanelCtrl.applyRuntimeArguments()"
    resolved-macros="HydratorPlusPlusTopPanelCtrl.resolvedMacros"
    run-pipeline="HydratorPlusPlusTopPanelCtrl.doStartOrStopPreview()"
    pipeline-name="{{HydratorPlusPlusTopPanelCtrl.state.metadata['name']}}"
    pipeline-action="Run"
    on-close="HydratorPlusPlusTopPanelCtrl.viewConfig = false"
    namespace-id="{{HydratorPlusPlusTopPanelCtrl.$state.params.namespace}}"
    store="HydratorPlusPlusTopPanelCtrl.HydratorPlusPlusConfigStore"
    action-creator="HydratorPlusPlusTopPanelCtrl.HydratorPlusPlusConfigActions"
    template-type="{{HydratorPlusPlusTopPanelCtrl.state.artifact.name}}"
    is-deployed="false"
    show-preview-config="HydratorPlusPlusTopPanelCtrl.previewMode"
    my-pipeline-config>
  </div>
</div>
<div class="pipeline-scheduler" ng-if="HydratorPlusPlusTopPanelCtrl.viewScheduler">
  <my-pipeline-scheduler
    store="HydratorPlusPlusTopPanelCtrl.HydratorPlusPlusConfigStore"
    action-creator="HydratorPlusPlusTopPanelCtrl.HydratorPlusPlusConfigActions"
    pipeline-name="{{HydratorPlusPlusTopPanelCtrl.state.metadata['name']}}"
    on-close="HydratorPlusPlusTopPanelCtrl.viewScheduler = false"
    anchor-el="pipeline-schedule-modeless-btn">
  </my-pipeline-scheduler>
</div>
<div
  class="pipeline-settings pipeline-logs-section"
  ng-if="HydratorPlusPlusTopPanelCtrl.viewLogs"
>
  <preview-logs
    namespace="HydratorPlusPlusTopPanelCtrl.$state.params.namespace"
    preview-id="HydratorPlusPlusTopPanelCtrl.currentPreviewId"
    stop-poll="!HydratorPlusPlusTopPanelCtrl.previewRunning"
    on-close="HydratorPlusPlusTopPanelCtrl.closeLogs">
  </preview-logs>
</div>
